<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :footer="false"
    @cancel="handleCancel"
    @ok="uploadFile"
    cancelText="关闭"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row :gutter="12">
        <a-col :span="16">
          <a-form-model-item label="日期序列" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dateList">
            <a-range-picker
              v-model="model.dateList"
              :placeholder="['开始日期', '结束日期']"
              style="width: 100%"
            ></a-range-picker>
          </a-form-model-item>
        </a-col>
        <a-col :span="16">
          <a-form-model-item label="选择客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dateList">
            <j-search-select-tag
              v-model="model.customId"
              placeholder="选择客户"
              dict="hf_custom,name,id"
              style="width: 100%"
            ></j-search-select-tag>
          </a-form-model-item>
        </a-col>
        <a-col :span="16">
          <a-form-model-item label="客户订单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customOrderSerial">
            <a-input v-model="model.customOrderSerial" placeholder="请输入客户订单号" style="width: 100%"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-item>
            <a-upload
              :file-list="fileList"
              :customRequest="customUpload"
              :openFileDialogOnClick="openFileDialogOnClick"
              :multiple="false"
              :showUploadList="false"
              name="file"
            >
              <a-button
                icon="import"
                type="primary"
                style="margin-top: 4px"
                @click="handleOpenFileDialogOnClick"
                :loading="loading"
                >选择文件
              </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'

import { postAction } from '@api/manage'

export default {
  name: 'HfSaleOrderUpload',
  data() {
    return {
      title: '生成销售出库单',
      width: 600,
      visible: false,
      model: {},
      fileList: null,
      openFileDialogOnClick: false,
      loading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      dateList: [],
      jumpCol: 6, // 需要跳过的列数
      validatorRules: {
        dateList: [{ required: true, message: '请输入日期区间!' }],
        customId: [{ required: true, message: '请输入客户!' }]
      },
      url: {
        importExcelUrl: 'sale/hfSaleorder/importExcel'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    //token header
    tokenHeader() {
      let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
      let tenantid = Vue.ls.get(TENANT_ID)
      if (tenantid) {
        head['tenant-id'] = tenantid
      }
      return head
    },
    dateParam() {}
  },
  methods: {
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    uploadFile() {
      console.log('上传文件')
    },
    customUpload(options) {
      this.loading = true
      const { file, onProgress, onSuccess, onError } = options
      console.log('options', options)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('customId', this.model.customId)
      formData.append('customOrderSerial', this.model.customOrderSerial ? this.model.customOrderSerial : '')
      formData.append('dateList', this.model.dateList.map(item => item.format('YYYY-MM-DD')).sort())
      postAction(this.importExcelUrl, formData, { headers: this.tokenHeader })
        .then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.close()
            this.$emit('uploadOk')
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.openFileDialogOnClick = false
          this.loading = false
        })
    },
    handleImportExcel(info) {
      const { file, fileList, event } = info
    },
    handleOpenFileDialogOnClick() {
      this.$refs.form.validate(valid => {
        console.log('valid', valid)
        if (valid) {
          this.openFileDialogOnClick = true
        }
      })
    }
  }
}
</script>

<style scoped></style>
